<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{admin/adminJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">

<body layout:fragment="content">
    <div id="myLayOut" class="easyui-layout" data-options="fit:true,border:false" style="height: 600px;">
        <div data-options="title:'&nbsp;&nbsp;菜单',region:'west'" style="width:250px;height: 600px;">
            <!--菜单树-->
            <div id="treeMenu" style="margin: 20px 0 0 0;">
                <el-tree
                        :data="menus"
                        node-key="id"
                        ref="treeMenu"
                        :props="defaultProps"
                        @node-click="nodeClick"
                        :expand-on-click-node="false"
                        style="width: 200px;margin: 15px;">
                </el-tree>
            </div>
        </div>

        <div data-options="region:'center',title:'&nbsp;&nbsp;权限配置'">
            <!--搜索栏-->
            <div id="toolbar">
                <div id="search" style="padding:15px">

                </div>
                <div id="operator" style="padding:0 0 15px 15px">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" v-on:click="add('')">新增</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" v-on:click="edit()">修改</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" v-on:click="deleted()">删除</a>
                </div>
            </div>
            <!--列表-->
            <table id="table" style="width:100%;" >

            </table>
        </div>
    </div>


    <script>

        var filter={ menuId:'0' };

        function reload(){
            $("#myLayOut").layout('panel','center').panel('setTitle','权限配置-'+filter.menuName);
            $('#table').datagrid('reload',filter);
        }

        function closeDialog(isRefresh) {
            if(isRefresh){
                reload();
            }
            $('#editDialog').dialog("close");
        }

        var vm=  new Vue({
            el: '#toolbar',
            data:filter,
            methods: {
                query:function () {
                    reload();
                },
                add:function (id) {
                    if(filter.menuId=='0'){
                        EasyuiUtils.alert("请选择菜单！");
                        return ;
                    }
                    EasyuiUtils.openWindows("editDialog",'新增',860,500,'/admin/user/permission/edit?id='+id+"&menuId="+filter.menuId+"&menuName="+filter.menuName);
                },
                edit:function () {
                    var row=EasyuiUtils.getSelected("#table");
                    if(row){
                        this.add(row.id);
                    }
                },
                deleted:function () {
                    EasyuiUtils.confirmDelete("#table",'/admin/user/permission/delete');
                }

            }
        });

        $('#table').datagrid({
            url:'/admin/user/permission/listData',
            queryParams:filter,
            columns:[
                [
                    {field:'id',title:'id',align:'center',width:'10%',hidden:false,checkbox:true},
                    {field:'menuName',title:'所属菜单',align:'center',width:'15%',hidden:false,formatter:menuNameFormatter},
                    {field:'name',title:'权限名称',align:'center',width:'15%',hidden:false},
                    {field:'code',title:'权限code',align:'center',width:'20%',hidden:false},
                    {field:'remark',title:'描述',align:'center',width:'40%',hidden:false}
                ]
            ],
            striped:true,
            pagination:true,
            rownumbers:true,
            singleSelect:true,
            toolbar:'#toolbar'
        });

        function menuNameFormatter(val,row) {
            return filter.menuName;
        }
        var treeVm=  new Vue({
            el: '#treeMenu',
            data:function () {
                var data=ajaxPost("/admin/system/menu/menuList",{});
                defaultProps= {
                    children: 'children',
                    label: 'name'
                };
                var menus=data;
                return {defaultProps:defaultProps,menus:menus,checkedKeys:data.checkedKeys};
            },
            methods: {
                nodeClick:function (data) {
                    /*if(data.children==null){

                    }*/
                    filter.menuId=data.id;
                    filter.menuName=data.name;
                    reload();
                },onSubmit:function () {

                }
            }
        });
    </script>
</body>

</html>